<template>
  <div class="change-pwd">
    <div class="panel">
      <div class="title">验证原有手机</div>
      <div class="content">
        <div class="input-group clearfix">
          <div class="left-title">输入旧密码：</div>
          <div class="right-content">
            <el-input placeholder="请输入旧密码" type="password" v-model="form.old_password"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">输入新密码：</div>
          <div class="right-content item2">
            <el-input placeholder="请输入新密码" type="password" v-model="form.new_password"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title">确认新密码：</div>
          <div class="right-content item2">
            <el-input placeholder="请再次输入新密码" type="password" v-model="new_password2"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title"></div>
          <div class="right-content">
            <button class="gray-btn" @click="goBack">取消</button>
            <button class="common-btn" @click="handleConfirm">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { modifyPwd } from 'api/user'
export default {

  name: 'CheckBefore',

  data() {
    return {
      form: {
        old_password: '',
        new_password: ''
      },
      new_password2: ''
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleConfirm() {
      if (this.form.new_password !== this.new_password2) {
        this.$message({
          message: '两次密码输入不一致',
          type: 'warning'
        })
        return false
      }
      modifyPwd(this.form)
      .then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.goBack()
      })
      .catch(err => {
        this.$message({
          message: err.msg || '修改失败',
          type: 'error'
        })
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.change-pwd{
  .panel{
    .title{
      background-color: #f4f4f4;
      padding: 0 20px;
      text-align: left;
      height: 40px;
      line-height: 40px;
    }
    .content{
      padding: 30px 0;
      border-bottom: 1px solid #e5e6e7;
    }
    .input-group{
      width: 420px;
      margin: 20px auto;
      .left-title{
        width: 90px;
        height: 30px;
        line-height: 30px;
        float: left;
      }
      .right-content{
        width: 330px;
        float: left;
        >button{
          width: 160px;
          height: 38px;
        }
      }
    }
  }
}
</style>